<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      border>
      <el-table-column prop="admin_id" label="序号" width="100px">
      </el-table-column>
      <el-table-column prop="admin_name" label="管理员账号"> </el-table-column>
      <el-table-column prop="admin_pwd" label="密码"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
           type="success"
            size="small"
            icon="el-icon-edit"
            @click="
              dialogFormVisible = true;
              handleEdit(scope);
            "
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
    :close-on-click-modal ="false"
      title="修改管理员的内容"
      :visible.sync="dialogFormVisible"
      width="25%"
    >
      <el-form :model="form">
        <el-form-item label="管理员账号" :label-width="formLabelWidth">
          <el-input
            v-model="form.admin_name"
            maxlength="10"
            minlength="4"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.admin_pwd"
            maxlength="10"
            minlength="6"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button type="info" plain @click="update()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        admin_name: "",
        admin_pwd: "",
      },
      formLabelWidth: "100px",
    };
  },
  mounted() {
    this.getAdmin()
  },
  created () {
    if(!sessionStorage.getItem('admin')){
    this.$router.push('/admin')
   }else if(sessionStorage.getItem('admin')=="root"){
    this.admin=sessionStorage.getItem('admin')
    this.getAdmin()
   }else{
    this.admin=sessionStorage.getItem('admin')
    this.$router.push('/backstage/sales')
   }
  },
  methods: {
    getAdmin(){
      this.axios.get("/get_admin").then((res) => {
      this.tableData = res.data.data;
      this.tableData.forEach((item) => {
        // console.log(item);
        item.admin_pwd = item.admin_pwd.replace(/^(.).*(.)$/, "$1***$2");
      });
    });
    },
    handleEdit(index) {
      this.form.admin_id = index.row.admin_id;
    },
    update() {
      this.axios
        .post("/upd_admin", qs.stringify(this.form))
        .then(async (res) => {
          this.$notify({
            title: "成功",
            message: "修改管理员成功",
            type: "success",
          });
          await this.getAdmin()
        });
    },
    handleDelete(index) {
      let admin_id = this.tableData[index].admin_id;
      this.axios.delete(`/del_admin/${admin_id}`).then(async(res) => {
        this.$notify({
            title: "成功",
            message: "删除管理员成功",
            type: "success",
          });
          await this.getAdmin()
        });
    },
  },
};
</script>
